import React from 'react';
import {Breadcrumb} from "antd";
import {serverGet} from "@/utils/request";
import './rich.css'
import MainTitle from "@/components/MainTitle";
import ContentNotFound from "@/components/ContentNotFound";

export const dynamicParams = true

export const generateStaticParams = async () => {
  try {
    const [res, res2] = await Promise.all([
      serverGet<Page<NewsUpdates>, { pageNum: number; pageSize: number }>(
        "/webSite/getNewsUpdatesListWithoutSpecialNews",
        {pageNum: 1, pageSize: 20}, {
          next: {
            revalidate: 1800
          },
          cache: "force-cache"
        }
      ),
      serverGet<Page<NewsUpdates>, { pageNum: number; pageSize: number }>(
        "/webSite/getSpecialNewsUpdatesList",
        {pageNum: 1, pageSize: 20}, {
          next: {
            revalidate: 1800
          },
          cache: "force-cache"
        }
      ),
    ])

    const records1 = res.code === 200 ? (res.data?.records ?? []) : []
    const records2 = res2.code === 200 ? (res2.data?.records ?? []) : []
    return [...records1, ...records2].map((item) => ({
      id: item.id,
    }))
  } catch {
    return []
  }
}


async function Page({
                      params,
                    }: {
  params: Promise<{ id: string }>
}) {
  const {id} = await params;
  const res = await serverGet<NewsUpdates, { id: string }>(
    "/webSite/getNewsUpdatesById",
    {id}, {
      next: {
        revalidate: 30
      },
      cache: "force-cache"
    }
  )
  if (!res.data) {
    return <ContentNotFound/>
  }
  
  return (
    <>
      <div className="w-4/5 mx-auto">
        <div className="pt-5 sm:pt-10 sm:ml-20 flex gap-2">
          <span className="text-sm">您当前的所在位置:</span>
          <Breadcrumb
            separator=">"
            items={[
              {title: "新闻列表", href: "/news"},
              {title: res.data.newsName || "新闻详情"},
            ]}
          />
        </div>
      </div>
      <div className="py-6 sm:py-10">
        <MainTitle title={"新闻动态"} titleLetter={"NEWS_DYNAMIC"}/>
      </div>
      <div className="w-4/5 mx-auto flex justify-center items-center">
        {/*<div className="">*/}
        <span className="text-3xl font-bold ">{res.data.newsName}</span>
        {/*</div>*/}
      </div>
      <div
        dangerouslySetInnerHTML={{__html: res.data.newsDetails as string}}
        className="ql-editor w-9/10 sm:w-7/10 mx-auto sm:px-20 sm:py-10"
      />
    </>
  );
}


export default Page;